<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photos</title>
<link rel="stylesheet" href="../model.css"/>
    <style>
        /* body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f5f5f5;
        } */
       
        
  .displayer{
width:1280px;
background-color: #cf1919;
background: rgba(94, 185, 38, 0.3);/*三个255表示白色，最后的0.3表示不透明度30%*/
/* margin-top: 95px;盒子离顶部的像素值 */
margin: 20px auto 0 auto; /*复合属性：上距离95px,右距离自动，下...，左...*/
padding: 45px 39px;
border-radius: 10px;
  flex-direction: column;
            align-items: center;
            justify-content: center;
            display: flex;
}
        .image-viewer {
            width: 90%;
            max-width: 800px;
            height: 500px;
            position: relative;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            border-radius: 8px;
            overflow: hidden;
            background-color: #fff;
        }
        
        .image-container {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #eee;
        }
        
        .image-container img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        .controls {
            margin-top: 20px;
            display: flex;
            gap: 20px;
        }
        
        button {
            padding: 10px 25px;
            font-size: 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            text-align: center;
        }
        
        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        
        .image-counter {
            margin-top: 15px;
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
      <!-- 导航 -->
  <div class="header">
    <!-- logo -->
    <div class="logo">
     谭艾玲个人网站
    </div>
    <!-- 菜单 -->
    <div class="nav">
         <a href="../tanai.html">WELCOME</a>
    <a href="../首页/Home.html" >个人介绍</a>
    <a href="photos.html" class="active">照片墙</a>
    <a href="../blog/blog.html">设计</a>
    <a href="../联系我/contact.html">联系我</a>
    </div>
  </div>
    <!-- 图像展示 -->
    <div class="displayer">
        <div class="image-container">
            <img id="current-image" src="" alt="展示图片">
        </div>
    </div>
    
    <div class="image-counter">
        <span id="current-index">1</span> / <span id="total-count">0</span>
    </div>
    
    <div class="controls">
        <button id="prev-btn">上一张</button>
        <button id="next-btn">下一张</button>
    </div>
 <div class="footer">
<p>
        设计制作:谭艾玲 Welcome to my website.
 </p>
</div>
    <script>
        //一定要用相对路径，并且用正斜杠（除号）/
        //其他电脑无法访问本地系统文件
        //不允许通过file：//协议
        const images = [
            "../image_2.jpg",
            "../image_3.jpg",
           "../image_4.jpg",
           "../image_5.jpg",
           "../love1.jpg",
           "../love2.jpg",
           "../love3.jpg",
           "../love4.jpg",
           
        ];
        
        // 获取DOM元素
        const currentImage = document.getElementById('current-image');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        const currentIndexDisplay = document.getElementById('current-index');
        const totalCountDisplay = document.getElementById('total-count');
        
        // 初始化变量
        let currentIndex = 0;
        totalCountDisplay.textContent = images.length;
        
        // 显示
        function showImage(index) {
            currentImage.src = images[index];
            currentIndexDisplay.textContent = index + 1;
            
            // 禁用/启用按钮
            prevBtn.disabled = index === 0;
            nextBtn.disabled = index === images.length - 1;
        }
        
        // 上一张图片
        function showPrevImage() {
            if (currentIndex > 0) {
                currentIndex--;
                showImage(currentIndex);
            }
        }
        
        // 下一张图片
        function showNextImage() {
            if (currentIndex < images.length - 1) {
                currentIndex++;
                showImage(currentIndex);
            }
        }
        
        // 添加事件监听器
        prevBtn.addEventListener('click', showPrevImage);
        nextBtn.addEventListener('click', showNextImage);
        
        // 初始化显示第一张图片
        showImage(0);
    </script>
</body>
</html>


